<template>
  <div class="register">
    <a-card class="card">
      <div class="header animated fadeInUp">
        <span>
          Nainu<small>账号注册</small>
        </span>
      </div>
      <div class="body animated" @keyup.enter="register">
        <a-form>
          <a-input placeholder="邮箱" class="animated fadeInUp" v-model="form.username">
            <a-icon slot="prefix" type="mail" class="icon" />
          </a-input>
          <a-input placeholder="至少6位密码，区分大小写" type="password" class="animated fadeInUp" v-model="form.password">
            <a-icon slot="prefix" type="lock" class="icon" />
          </a-input>
          <a-input placeholder="确认密码" type="password" class="animated fadeInUp" v-model="form.password2">
            <a-icon slot="prefix" type="lock" class="icon" />
          </a-input>
          <a-button type="primary" :loading="loading.submit" @click="register" class="animated fadeInUp">确认注册</a-button>
          <div class="item">
            <span class="right animated fadeInUp">
              <router-link :to="{ name: 'login'}"><a-icon type="rollback" /></router-link>
            </span>
          </div>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script>

export default {
    data () {
        return {
            loading: {
                submit: false
            },
            form: {
                username: '',
                password: '',
                password2: ''
            }
        }
    },
    methods: {
        register () {
            const loginParams = { ...this.form }
            if (loginParams.username === null || loginParams.username === '') {
                this.$message.warning('邮箱不可为空')
            } else if (loginParams.password === null || loginParams.password === '') {
                this.$message.warning('密码不可为空')
            } else if (loginParams.password2 === null || loginParams.password2 === '') {
                this.$message.warning('确认密码不可为空')
            } else {
                this.$router.push({ name: 'registerResult' })
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,100%,0);
            transform: translate3d(0,100%,0);
        }
        100% {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }

    .register {
        .card {
            box-shadow: -4px 7px 46px 2px rgba(0,0,0,.1);
            border-radius: 5px;
            padding: 5px;

            .header {
                text-align: center;
                margin-top: 5px;
                margin-bottom: 10px;
                span {
                    vertical-align: text-bottom;
                    font-size: 38px;
                    display: inline-block;
                    font-weight: 600;
                    color: #1790fe;
                    background-image: linear-gradient(-20deg,#6e45e2,#88d3ce);
                    -webkit-text-fill-color: transparent;
                    -webkit-background-clip: text;
                    background-clip: text;
                }
                small {
                    margin-left: 5px;
                    font-size: 35%;
                }
            }

            .body {

                .ant-input-affix-wrapper {
                    margin: 10px 0px;

                    .icon {
                        color: #d9d9d9;
                    }
                }

                .ant-btn{
                    margin: 10px 0px;
                    width: 100%;
                    border-radius: 5px;
                }

                .item {
                    padding-top: 15px;
                    padding-bottom: 15px;

                    .right {
                        float: right;
                    }

                    .left {
                        float: left;
                        .anticon {
                            margin-right: 10px;
                            font-size: 18px;
                        }
                        .icon-qq {
                            color: rgb(35, 160, 240);;
                        }
                        .icon-wechat {
                            color: rgb(105, 187, 100);
                        }
                    }
                }
            }
        }
    }
    @media (min-width: 500px) {
        .register {
            text-align: center;
            margin-top: 40px;
            .card {
                text-align: center;
                width: 400px;
                margin:0 auto
            }
        }
    }
    @media (max-width: 500px) {
        .register {
            margin: 20px;
        }
    }
</style>
